<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>神灯速贸</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="msapplication-tap-highlight" content="no"/>
        <link rel="stylesheet" href="../css/public.css">
        <link rel="stylesheet" href="../css/pull.css">
        <link rel="stylesheet" href="../css/animate.css">
        <link rel="stylesheet" href="../css/main.css">
        <script src="../js/zepto.min.js"></script>
        <script src="../js/iscroll.js"></script>
        <script src="../js/main.js"></script>
        <script src="../js/iscroll_constructor.js"></script>
    </head>
    <body>
	    <header class="header" style="display: block;">
	        <div class="title">俄境运输</div>
	        <a class="btn-back" href="#"><span>综合服务</span></a>
	    </header>
			
	    <div class="container service-page">
			<ul class="select-wrapper clearfix">
				<li><a class="select start-select" href=#>发货地<span></span></a></li>
				<li><a class="select end-select" href=#>目的地<span></span></a></li>
			</ul>

			<div class="start-addr-wrappr addr-wrappr animated">
    			<a class="addr" href="#">满洲里</a>
    			<a class="addr" href="#">上海</a>
    			<a class="addr" href="#">俄罗斯</a>
            </div>
			
			<div class="end-addr-wrappr addr-wrappr animated">
    			<a class="addr" href="#">满洲里</a>
    			<a class="addr" href="#">上海</a>
    			<a class="addr" href="#">俄罗斯</a>
            </div>

	  		<div id="page1-wrapper" class="transport-content scroll-wrapper active">
	  			<div id="scroller1" class="scroler">
	  				<div id="page1-pull-down" class="pull-down">
                        <span class="pull-down-icon"></span>
                        <span id="page1-pull-down-label" class="pull-down-label">下拉刷新...</span>
                    </div>

	  				<ul>
						<li>
							<a href="#">
								<div class="destination my-ellipsis">上海——乌兰乌德</div>
								<div class="my-ellipsis">费用：
									<span class="c-red">15,000（USD/单程）</span>
								</div>
								<div class="detail-long my-ellipsis">车型：
									<span>集装箱车(暖车)</span>
								</div>
								<div class="detail-short my-ellipsis">规格：
									<span>40寸</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="destination my-ellipsis">上海——乌兰乌德</div>
								<div class="my-ellipsis">费用：
									<span class="c-red">15,000（USD/单程）</span>
								</div>
								<div class="detail-long my-ellipsis">车型：
									<span>集装箱车(暖车)</span>
								</div>
								<div class="detail-short my-ellipsis">规格：
									<span>40寸</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="destination my-ellipsis">上海——乌兰乌德</div>
								<div class="my-ellipsis">费用：
									<span class="c-red">15,000（USD/单程）</span>
								</div>
								<div class="detail-long my-ellipsis">车型：
									<span>集装箱车(暖车)</span>
								</div>
								<div class="detail-short my-ellipsis">规格：
									<span>40寸</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="destination my-ellipsis">上海——乌兰乌德</div>
								<div class="my-ellipsis">费用：
									<span class="c-red">15,000（USD/单程）</span>
								</div>
								<div class="detail-long my-ellipsis">车型：
									<span>集装箱车(暖车)</span>
								</div>
								<div class="detail-short my-ellipsis">规格：
									<span>40寸</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="destination my-ellipsis">上海——乌兰乌德</div>
								<div class="my-ellipsis">费用：
									<span class="c-red">15,000（USD/单程）</span>
								</div>
								<div class="detail-long my-ellipsis">车型：
									<span>集装箱车(暖车)</span>
								</div>
								<div class="detail-short my-ellipsis">规格：
									<span>40寸</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="destination my-ellipsis">上海——乌兰乌德</div>
								<div class="my-ellipsis">费用：
									<span class="c-red">15,000（USD/单程）</span>
								</div>
								<div class="detail-long my-ellipsis">车型：
									<span>集装箱车(暖车)</span>
								</div>
								<div class="detail-short my-ellipsis">规格：
									<span>40寸</span>
								</div>
							</a>
						</li>
					</ul>
					<div id="page1-pull-up" class="pull-up">
                        <span class="pull-up-icon"></span>
                        <span id="page1-pull-up-label"  class="pull-up-label">上拉加载更多...</span>
                    </div>
				</div>
	  		</div>
            
	    </div> 
        <script>
            $(function(){                
				$(".select").tap(function(){
					$(".addr-wrappr").removeClass("fadeOut fadeIn");
					$(".select").removeClass("selected");
					$(this).addClass("selected");
					if($(this).parent().index()) {
						$(".end-addr-wrappr").addClass("fadeIn");
					} else {
						$(".start-addr-wrappr").addClass("fadeIn");
					}
				})

				//下拉选择 index为选择项的排序
                $(".addr").tap(function(){
					$(".select").removeClass("selected");
				    $(this).parent().removeClass("fadeIn").addClass("fadeOut");
				    var index = $(this).index() + 1;
				    console.log(index);
				})
            })
            $(".transport-content").height(h - 44 - 44);
            // page1 下拉刷新
            function p1PullDown() {
                console.log("p1PullDown");
                // window.location.reload();
            }
            // page2 上拉加载更多
            function p1PullUp() {
                console.log("p1PullUp");
                // $.getJSON("p1PullDown", function (data) {
                    
                // });
            }

            var scrollPage;
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', function(){
                scrollPage = new Scroll();
                scrollPage.loaded('page1', p1PullDown, p1PullUp);
            }, false);
        </script>
    </body>
</html>